<template>
  <div class="flex-row flex-wrap ">
    <div class="item" v-for="item in list" :key="item.album_mid" @click="handleAlbumClick(item)">
      <img :src="`https://y.gtimg.cn/music/photo_new/T002R300x300M000${item.album_mid}.jpg`" alt="">
      <div class="name">{{item.album_name}}</div>
      <div class="time">{{item.pub_time}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "SingerAlbum",
  inject: ["navigateTo"],
  props: {
    list: {}
  },
  methods: {
    handleAlbumClick(item) {
      this.navigateTo(`/album/${item.album_mid}`)
    }
  }
}
</script>

<style scoped lang="scss">
@import "~@/assets/css/var";
  .item{
    width: 150px;
    padding: $pn;
    line-height: 1.2;
    img{
      width: 100%;
    }
    .name{
      width: 100%;
      overflow-x: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
</style>
